<template>
  <div class="m-contain">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-document"></i>档案信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" v-if="!this.$common.status.student">
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" v-show="!this.status.isEdit"
                 label-width="100px" class="searchBox">
          <el-form-item label="学号" prop="id" class="inputForm">
            <el-input v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item class="searchButton">
            <el-button type="primary" icon="el-icon-search" v-show="this.status.search" @click="submitForm('ruleForm')"
                       circle></el-button>
            <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')" circle></el-button>
          </el-form-item>
          <el-button icon="el-icon-plus" @click="addArchivesInfo" v-show="!this.status.ifEdit&&this.status.add"
                     circle></el-button>
        </el-form>
      </div>
      <div class="editButton" v-show="!this.status.isEdit&&this.status.ifEdit">
        <el-button type="primary" icon="el-icon-edit" @click="editInfo"
                   v-show="this.status.update"
                   circle></el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteInfo"
                   v-show="this.status.delete"
                   circle></el-button>
      </div>
      <div v-show="this.status.hasFoundSingle&&!this.status.isEdit">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <table border="0" height="300px" class="singleInfo">
              <tr>
                <td><span class="singleInfo-key">姓名：</span></td>
                <td colspan="3">{{ archivesInfo[0].archivesStuName }}</td>
                <td><span class="singleInfo-key">学号：</span></td>
                <td colspan="3"><span class="number">{{ archivesInfo[0].archivesStuId }}</span></td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">档案归属地：</span></td>
                <td colspan="3">{{ archivesInfo[0].archivesPlace }}</td>
                <td><span class="singleInfo-key">邮寄编码：</span></td>
                <td colspan="3">{{ archivesInfo[0].archivesZipcode }}</td>
              </tr>
            </table>
          </el-card>
        </transition>
      </div>
      <div v-show="this.status.isEdit">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <el-form :inline="true" :model="archivesInfoTemp" :rules="rules"
                     ref="archivesInfoTemp"
                     label-width="100px"
                     class="editForm">
              <el-form-item class="checkButton">
                <el-button type="success" icon="el-icon-check" @click.native="postInfo"
                           circle></el-button>
                <el-button type="danger" icon="el-icon-close" @click.native="cancelPost"
                           circle></el-button>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="学号" prop="ID">
                    <el-input v-model="archivesInfoTemp.archivesStuId" class="inputForm"
                              :disabled="!status.isAdd"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="archivesInfoTemp.archivesStuName" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="档案归属地" prop="archivesPlace">
                    <el-input v-model="archivesInfoTemp.archivesPlace" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮编" prop="archivesZipcode">
                    <el-input v-model="archivesInfoTemp.archivesZipcode" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </transition>
      </div>
    </div>

  </div>
</template>

<script>
import Header from "../components/Header.vue";
import bus from "../components/bus";

export default {
  name: "Archives",
  // components: {Header},
  data() {
    return {
      ruleForm: {
        id: ''
      },
      rules: {
        id: [
          {required: true, message: '请输入学号', trigger: 'blur'},
          {min: 10, max: 10, message: '长度为10 个字符', trigger: 'change'}
        ]
      },
      archivesInfo: [{
        archivesId: null,
        archivesPlace: null,
        archivesStuId: null,
        archivesStuName: null,
        archivesZipcode: null
      }],
      archivesInfoTemp: {},
      status: {
        hasFoundSingle: false,
        hasFoundMany: false,
        isEdit: false,
        ifEdit: false,
        add: false,
        search: false,
        update: false,
        delete: false,
        loading: true,
        isAdd: false
      }
    }
  },
  created() {
    if (this.$store.state.userInfo.roles === 'student') {

      this.$set(this.$common.status, 'student', true)
    }
    for (let permission of this.$store.state.userInfo.permission) {
      this.$set(this.status, permission, true)
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          // alert('submit!');
          this.$axios.get('/archives/' + this.ruleForm.id, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            _this.$set(_this.archivesInfo, 0, res.data.data)
            this.$set(this.status, "hasFoundSingle", true)
            this.$set(this.status, "ifEdit", true)
          }).catch(err => {
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$set(this.ruleForm, "id", "");
      this.$common.resetObject(this.archivesInfo[0])
      this.$set(this.status, "ifEdit", false)
      this.$set(this.status, "hasFoundSingle", false)
      this.$set(this.status, "hasFoundMany", false)
    },
    editInfo() {
      this.$common.objectValueAtoB(this.archivesInfo[0], this.archivesInfoTemp)
      this.$set(this.status, "isEdit", true)
    },
    postInfo() {
      const _this = this
      if (!this.$common.isObjectValueEqual(this.archivesInfoTemp, this.archivesInfo[0])) {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (_this.status.isAdd) {
            this.$axios.post('/archives/save', _this.archivesInfoTemp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              _this.$message.success("添加成功")
              this.$set(this.status, "isEdit", false)
              _this.$set(_this.status, 'isAdd', false)
            }).catch(err => {
              console.log(err)
            });
          } else {
            this.$axios.post('/archives/update', _this.archivesInfoTemp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              this.$common.objectValueAtoB(_this.archivesInfoTemp, _this.archivesInfo[0]);
              _this.$message.success("修改成功")
              this.$set(this.status, "isEdit", false)
            }).catch(err => {
              console.log(err);
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      }
    },
    deleteInfo() {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.delete('archives/' + _this.archivesInfo[0].archivesStuId, {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
        });
        this.$common.resetObject(this.archivesInfo[0])
        this.$set(this.status, "ifEdit", false)
        this.$set(this.status, "hasFoundSingle", false)
        this.$set(this.status, "hasFoundMany", false)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });
      });

    },
    cancelPost() {
      this.$confirm('是否离开编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.archivesInfoTemp = {}
        this.$set(this.status, "isEdit", false)
        this.$set(this.status, "isAdd", false)
        this.$message({
          type: 'error',
          message: '未修改!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    addArchivesInfo() {
      this.$common.objectValueAtoB(this.archivesInfo[0], this.archivesInfoTemp)
      this.$set(this.status, "isEdit", true)
      this.$set(this.status, "isAdd", true)
      this.$set(this.status, "ifEdit", false)
      this.$set(this.status, "hasFoundSingle", false)
      this.$set(this.status, "hasFoundMany", false)
    }
  }
}
</script>

<style scoped>

</style>